<template>
  <div class="app-container">
    <!-- 商品信息 -->
    <template v-if="!loading">
      <p class="pageTitle">{{ pageType }} Product</p>
      <el-form
        ref="productForm"
        :model="formData"
        :rules="formData.rules"
        :hide-required-asterisk="true"
        label-position="top"
        style="margin-bottom:45px;overflow:hidden;padding:1px;"
      >
        <!-- 选择店铺 -->
        <div class="myCard">
          <el-form-item
            class="storeItem"
            prop="storeId"
            label="Choose Store"
            position="left"
          >
            <el-select
              v-model="storeId"
              :disabled="pageType === 'Edit'"
              placeholder="Choose Store"
              @change="chosedStore"
            >
              <el-option
                v-for="item in storeList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
              <template slot="empty">
                <div class="noDataTip">
                  There are no shops yet.&nbsp;<el-button type="text" @click="$router.push('/store/wooc')">Add</el-button>
                </div>
              </template>
            </el-select>
          </el-form-item>
        </div>
        <div :class="['productInfo', !storeId ? 'waiting' : '']">
          <div class="infoRight">
            <div class="myCard">
              <el-form-item prop="name" label="Title">
                <el-input v-model="formData.name" placeholder="Product title" />
              </el-form-item>
              <el-form-item label="Description">
                <UE :id="ue" ref="ue" :default-msg="defaultMsg" />
              </el-form-item>
            </div>
            <div class="myCard">
              <el-form-item id="Images" label="Images">
                <img
                  v-for="(item, index) in images"
                  :key="index"
                  :src="
                    item.uri.indexOf('http') === 0
                      ? item.uri
                      : imgPrefix + item.uri + imgSuffix
                  "
                  class="productImg"
                  :style="
                    index === 0
                      ? 'width:100px;height:100px;margin-right: 10px;'
                      : 'margin-right: 10px;'
                  "
                  @click="
                    toProview(
                      item.uri.indexOf('http') === 0
                        ? item.uri
                        : imgPrefix + item.uri
                    )
                  "
                >
                <el-button
                  :style="{
                    position: 'relative',
                    top: images.length > 0 ? '-20px' : '0'
                  }"
                  @click="thumbnailShow = true"
                >{{ images.length >= 1 ? "Edit" : "Add/Select" }}</el-button>
              </el-form-item>
            </div>
            <!-- 单一 -->
            <template v-if="!(pageType === 'Edit' && formData.type === 1)">
              <div class="myCard">
                <p class="myCardTitle">Pricing</p>
                <el-row :gutter="20">
                  <el-col :span="4">
                    <el-form-item prop="salePrice" label="Sale Price">
                      <el-input v-model="formData.salePrice" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item prop="regularPrice" label="Regular Price">
                      <el-input v-model="formData.regularPrice" />
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item prop="taxStatus" label="Tax status">
                      <el-select v-model="formData.taxStatus">
                        <el-option label="None" :value="0" />
                        <el-option label="Taxable" :value="1" />
                        <el-option label="Shipping only" :value="2" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item prop="taxClass" label="Tax class">
                      <el-select v-model="formData.taxClass">
                        <el-option label="Standard" value="Standard" />
                        <el-option label="Reduced rate" value="Reduced rate" />
                        <el-option label="Zero rate" value="Zero rate" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
              </div>
              <div class="myCard">
                <p class="myCardTitle">Inventory</p>
                <el-row :gutter="20">
                  <el-col :span="4">
                    <el-form-item prop="sku" label="SKU">
                      <el-input
                        v-model="formData.sku"
                        placeholder="SKU"
                        @input="changeVariantSku"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item prop="barcode" label="Barcode">
                      <el-input
                        v-model="formData.barcode"
                        placeholder="Barcode"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="4">
                    <el-form-item label="Track quantity">
                      <el-checkbox
                        v-model="formData.isManageInventory"
                        :true-label="1"
                        :false-label="0"
                        @change="val => toggleCheck(val, 'isManageInventory')"
                      />
                    </el-form-item>
                  </el-col>
                  <el-col :span="6">
                    <el-form-item
                      v-if="formData.isManageInventory === 0"
                      label="Stock status"
                    >
                      <el-select v-model="formData.inventoryStatus">
                        <el-option label="In stock" :value="0" />
                        <el-option label="Out of stock" :value="1" />
                        <el-option label="On backOrder" :value="2" />
                      </el-select>
                    </el-form-item>
                  </el-col>
                  <template v-if="formData.isManageInventory">
                    <el-col :span="4">
                      <el-form-item
                        prop="inventoryQuantity"
                        label="Inventory quantity"
                      >
                        <el-input
                          v-model.number="formData.inventoryQuantity"
                          placeholder="inventoryQuantity"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item label="Allow backorders">
                        <el-checkbox
                          v-model="formData.allowBackorders"
                          :true-label="1"
                          :false-label="0"
                          @change="val => toggleCheck(val, 'allowBackorders')"
                        />
                      </el-form-item>
                    </el-col>
                    <el-col :span="4">
                      <el-form-item
                        v-if="formData.allowBackorders"
                        prop="lowInventoryThreshold"
                        label="Low inventory threshold"
                      >
                        <el-input
                          v-model.number="formData.lowInventoryThreshold"
                          placeholder="lowInventoryThreshold"
                        />
                      </el-form-item>
                    </el-col>
                  </template>
                </el-row>
              </div>
              <div class="myCard">
                <p class="myCardTitle">Shipping</p>
                <el-row :gutter="20">
                  <el-col :span="6">
                    <el-form-item prop="isVirtual">
                      <el-checkbox
                        v-model="formData.isVirtual"
                        :true-label="1"
                        :false-label="0"
                        @change="val => toggleCheck(val, 'isVirtual')"
                      >Is Virtual</el-checkbox>
                    </el-form-item>
                  </el-col>
                </el-row>
                <template v-if="formData.isVirtual === 0">
                  <el-row :gutter="20">
                    <el-col :span="4">
                      <el-form-item prop="weight" label="Weight">
                        <el-input
                          v-model="formData.weight"
                          placeholder="weight"
                        />
                      </el-form-item>
                    </el-col>
                    <!-- <el-col :span="4">
                      <el-form-item prop="isDimensions" label="Is Dimensions">
                        <el-checkbox
                          v-model="formData.isDimensions"
                          :true-label="1"
                          :false-label="0"
                        >Is Dimensions</el-checkbox>
                      </el-form-item>
                    </el-col> -->
                    <el-col :span="9">
                      <el-form-item label="Dimensions">
                        <el-row
                          class="inputs"
                          type="flex"
                          justify="space-between"
                          :gutter="20"
                        >
                          <el-col :span="8">
                            <el-form-item prop="length">
                              <el-input
                                v-model="formData.length"
                                placeholder="Length"
                              />
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item prop="width">
                              <el-input
                                v-model="formData.width"
                                placeholder="Width"
                              />
                            </el-form-item>
                          </el-col>
                          <el-col :span="8">
                            <el-form-item prop="height">
                              <el-input
                                v-model="formData.height"
                                placeholder="Height"
                              />
                            </el-form-item>
                          </el-col>
                        </el-row>
                      </el-form-item>
                    </el-col>
                    <el-col :span="6">
                      <el-form-item
                        prop="shippingClassId"
                        label="Shipping class"
                      >
                        <el-select v-model="formData.shippingClassId">
                          <el-option label="No shipping class" :value="0" />
                        </el-select>
                      </el-form-item>
                    </el-col>
                  </el-row>
                </template>
              </div>
            </template>
          </div>
          <div class="infoLeft">
            <div class="myCard">
              <p class="myCardTitle">Online Store</p>
              <el-form-item label="Publish Time">
                <el-date-picker
                  v-model="formData.publishTime"
                  type="datetime"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  :picker-options="timeChange"
                />
              </el-form-item>
            </div>
            <div class="myCard">
              <el-form-item prop="productCategoryIds">
                <div slot="label" class="customLabel">
                  <span class="customLabelTitle">Category</span>
                  <el-button
                    type="text"
                    @click="getClick($event, 'category')"
                  >view all</el-button>
                </div>
                <el-cascader
                  v-model="formData.productCategoryIds"
                  :options="categoryOptions"
                  :show-all-levels="false"
                  :props="categoryProp"
                  @visible-change="productCategoryList"
                />
              </el-form-item>
            </div>
            <div class="myCard">
              <el-form-item prop="productTagIds">
                <div slot="label" class="customLabel">
                  <span class="customLabelTitle">Tags</span>
                  <el-button
                    type="text"
                    @click="getClick($event, 'tag')"
                  >view all</el-button>
                </div>
                <el-select
                  v-model="formData.productTagIds"
                  filterable
                  multiple
                  allow-create
                  placeholder="select/add tags"
                  @change="productTagAdd"
                  @visible-change="productTagList"
                >
                  <el-option
                    v-for="item in tagOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
            <div class="myCard">
              <el-form-item prop="vendorId">
                <div slot="label" class="customLabel">
                  <span class="customLabelTitle">Vendor</span>
                  <el-button
                    type="text"
                    @click="getClick($event, 'vendor')"
                  >view all</el-button>
                </div>
                <el-select
                  v-model="formData.vendorId"
                  filterable
                  allow-create
                  placeholder="select/add vendor"
                  @change="vendorAdd"
                  @visible-change="vendorList"
                >
                  <el-option
                    v-for="item in vendorOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </div>
          </div>
        </div>

        <!-- 变体 -->
        <div class="myCard" style="margin-bottom:20px;">
          <p class="myCardTitle flex">
            <span>Variants</span>
            <el-button
              v-if="formData.type === 1"
              type="text"
              @click="viewVariant = true"
            >view all</el-button>
          </p>
          <el-radio-group
            v-model="formData.type"
            :disabled="pageType === 'Edit'"
          >
            <el-radio :label="0">Simple product</el-radio>
            <el-radio :label="1">Variants</el-radio>
          </el-radio-group>
          <div
            v-if="formData.type === 1"
            style="margin-top: 15px;padding-top:15px;border-top: 1px solid #ddd; width: 100%;"
          >
            <!-- 规格信息 -->
            <el-row :gutter="20">
              <div
                v-for="(item, index) in specifications"
                :key="index"
                class="specificationItem"
              >
                <el-col :span="6">
                  <el-form-item label="" label-width="100px">
                    <el-select
                      v-model="item.parent"
                      placeholder="Please select"
                      @visible-change="resetVariantList"
                      @change="variantNameChange(index)"
                    >
                      <el-option
                        v-for="i in specList"
                        :key="i.id"
                        :label="i.name"
                        :value="i.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="16">
                  <el-form-item label="" label-width="10px">
                    <el-select
                      v-model="item.son"
                      multiple
                      filterable
                      default-first-option
                      :placeholder="`select ${item.parent} values`"
                      style="width:100%;"
                    >
                      <el-option
                        v-for="i in selectOptions[index]"
                        :key="i.name"
                        :label="i.name"
                        :value="i.name"
                      />
                    </el-select>
                  </el-form-item>
                </el-col>
                <el-col :span="2">
                  <el-form-item label="" label-width="10px">
                    <el-button
                      type="text"
                      @click="removeItem(index)"
                    >remove</el-button>
                  </el-form-item>
                </el-col>
              </div>
              <el-col :span="6">
                <el-form-item label="" label-width="100px">
                  <el-button
                    v-if="specifications.length < 3"
                    plain
                    @click="addSpecificationItem()"
                  >Add variants</el-button>
                </el-form-item>
              </el-col>
            </el-row>
            <!-- 变种信息 -->
            <div class="specificationData">
              <div v-if="formData.specificationData.length" class="batchEditor">
                <span>Batch operation: </span>
                <div class="titles">
                  <template v-for="(item, index) in batchOptions">
                    <template v-if="item.type === 'input'">
                      <el-button
                        :key="index"
                        size="mini"
                        @click="setInputVal(item.label)"
                      >{{ item.title }}</el-button>
                    </template>
                    <template v-if="item.type === 'checkbox'">
                      <el-button :key="index" size="mini">
                        {{ item.title }}
                        <el-checkbox
                          :true-label="1"
                          :false-label="0"
                          @change="
                            checked => batchCheckChange(checked, item.label)
                          "
                        />
                      </el-button>
                    </template>
                  </template>
                </div>
              </div>
              <div
                v-for="(item, index) in formData.specificationData"
                :key="index"
                class="specificationBox"
              >
                <div class="specLeft">
                  <p>Image</p>
                  <el-image
                    v-if="item.thumbnailUri"
                    :src="
                      item.thumbnailUri.indexOf('http') === 0
                        ? item.thumbnailUri
                        : imgPrefix + item.thumbnailUri + imgSuffix
                    "
                    class="show-img"
                    @click="
                      showVariantImgDialog(
                        index,
                        item.imageId,
                        item.thumbnailUri
                      )
                    "
                  />
                  <i
                    v-else
                    class="el-icon-plus uploader-icon"
                    @click="showVariantImgDialog(index, null, null)"
                  />
                </div>
                <div class="specCenter">
                  <el-table ref="multipleTable" :data="[item]">
                    <el-table-column prop="salePrice" label="Sale Price($)">
                      <template slot-scope="scope">
                        <el-form-item
                          :prop="'specificationData.' + index + '.salePrice'"
                          :rules="formData.rules.salePrice"
                        >
                          <el-input v-model="scope.row.salePrice" />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="regularPrice"
                      label="Regular Pricee($)"
                    >
                      <template slot-scope="scope">
                        <el-form-item
                          :prop="'specificationData.' + index + '.regularPrice'"
                          :rules="formData.rules.regularPrice"
                        >
                          <el-input v-model="scope.row.regularPrice" />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column prop="saleTime" label="Sale Time">
                      <template slot-scope="scope">
                        <el-form-item
                          :prop="'specificationData.' + index + '.saleTime'"
                          :rules="formData.rules.saleTime"
                        >
                          <el-date-picker
                            v-model="scope.row.saleTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :picker-options="timeChange"
                          />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column prop="offSaleTime" label="OffSale Time">
                      <template slot-scope="scope">
                        <el-form-item
                          :prop="'specificationData.' + index + '.offSaleTime'"
                          :rules="formData.rules.offSaleTime"
                        >
                          <el-date-picker
                            v-model="scope.row.offSaleTime"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            :picker-options="timeChange"
                          />
                        </el-form-item>
                      </template>
                    </el-table-column>
                    <el-table-column label="Tax status">
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.taxStatus">
                          <el-option label="None" :value="0" />
                          <el-option label="Taxable" :value="1" />
                          <el-option label="Shipping only" :value="2" />
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="Tax class">
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.taxClass">
                          <el-option label="Standard" value="Standard" />
                          <el-option
                            label="Reduced rate"
                            value="Reduced rate"
                          />
                          <el-option label="Zero rate" value="Zero rate" />
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="variantSku"
                      label="Variant sku"
                      width="100"
                    />
                    <el-table-column prop="Bar code" label="Bar Code">
                      <template slot-scope="scope">
                        <el-form-item
                          :prop="'specificationData.' + index + '.barcode'"
                          :rules="formData.rules.barcode"
                        >
                          <el-input v-model="scope.row.barcode" />
                        </el-form-item>
                      </template>
                    </el-table-column>
                  </el-table>
                  <el-table ref="multipleTable" :data="[item]">
                    <el-table-column label="Virtual" width="80px">
                      <template slot-scope="scope">
                        <el-checkbox
                          v-model="scope.row.isVirtual"
                          :true-label="1"
                          :false-label="0"
                          @change="
                            val => specToggleCheck(val, 'isVirtual', index)
                          "
                        />
                      </template>
                    </el-table-column>
                    <template v-if="item.isVirtual === 0">
                      <el-table-column label="Weight(kg)">
                        <template slot-scope="scope">
                          <el-form-item
                            :prop="'specificationData.' + index + '.weight'"
                            :rules="formData.rules.weight"
                          >
                            <el-input v-model="scope.row.weight" />
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="Length(cm)">
                        <template slot-scope="scope">
                          <el-form-item
                            :prop="'specificationData.' + index + '.length'"
                            :rules="formData.rules.length"
                          >
                            <el-input v-model="scope.row.length" />
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="Width(cm)">
                        <template slot-scope="scope">
                          <el-form-item
                            :prop="'specificationData.' + index + '.width'"
                            :rules="formData.rules.width"
                          >
                            <el-input v-model="scope.row.width" />
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="Height(cm)">
                        <template slot-scope="scope">
                          <el-form-item
                            :prop="'specificationData.' + index + '.height'"
                            :rules="formData.rules.height"
                          >
                            <el-input v-model="scope.row.height" />
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="Shipping class">
                        <template slot-scope="scope">
                          <el-select v-model="scope.row.shippingClassId">
                            <el-option label="No shipping class" :value="0" />
                          </el-select>
                        </template>
                      </el-table-column>
                    </template>
                    <el-table-column label="Stock" width="80px">
                      <template slot-scope="scope">
                        <el-checkbox
                          v-model="scope.row.isManage"
                          :true-label="1"
                          :false-label="0"
                          @change="
                            val => specToggleCheck(val, 'isManage', index)
                          "
                        />
                      </template>
                    </el-table-column>
                    <template v-if="item.isManage">
                      <el-table-column label="Quantity">
                        <template v-if="scope.row.isManage" slot-scope="scope">
                          <el-form-item
                            :prop="'specificationData.' + index + '.quantity'"
                            :rules="formData.rules.quantity"
                          >
                            <el-input v-model.number="scope.row.quantity" />
                          </el-form-item>
                        </template>
                      </el-table-column>
                      <el-table-column label="Allow backorders">
                        <template v-if="scope.row.isManage" slot-scope="scope">
                          <el-checkbox
                            v-model="scope.row.allowBackorders"
                            :true-label="1"
                            :false-label="0"
                            @change="
                              val =>
                                specToggleCheck(val, 'allowBackorders', index)
                            "
                          />
                        </template>
                      </el-table-column>
                      <el-table-column
                        v-if="item.isManage == 1 && item.allowBackorders === 1"
                        label="LowInventory threshold"
                      >
                        <template slot-scope="scope">
                          <el-form-item
                            :prop="
                              'specificationData.' +
                                index +
                                '.lowInventoryThreshold'
                            "
                            :rules="formData.rules.lowInventoryThreshold"
                          >
                            <el-input
                              v-model.number="scope.row.lowInventoryThreshold"
                            />
                          </el-form-item>
                        </template>
                      </el-table-column>
                    </template>
                    <el-table-column v-else label="status">
                      <template slot-scope="scope">
                        <el-select v-model="scope.row.status">
                          <el-option label="In stock" :value="0" />
                          <el-option label="Out of stock" :value="1" />
                          <el-option label="On backOrder" :value="2" />
                        </el-select>
                      </template>
                    </el-table-column>
                    <el-table-column label="Sold individually">
                      <template slot-scope="scope">
                        <el-checkbox
                          v-model="scope.row.isSoldIndividually"
                          :true-label="1"
                          :false-label="0"
                        />
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
                <div class="specRight">
                  <i
                    class="el-icon-delete"
                    @click="deleteSkuItem(item, index)"
                  />
                </div>
              </div>
            </div>
          </div>
        </div>
      </el-form>
    </template>

    <!-- 数据请求时显示loading -->
    <div
      v-else
      v-loading="loading"
      element-loading-text="loading..."
      style="height: 120px;"
    />

    <div :class="[{ open: $store.state.app.sidebar.opened }, 'bottomBtns']">
      <div class="right">
        <el-button
          type="primary"
          :disabled="loading || !storeId"
          @click="submitData"
        >Save</el-button>
        <el-button @click="goBack()">Back</el-button>
      </div>
    </div>

    <!-- 缩略图弹窗 -->
    <thumbnail-dialog
      v-if="thumbnailShow"
      :id="storeId"
      :images="images"
      @choseThumbnail="choseThumbnail"
    />

    <!-- 变种图片上传 -->
    <upload-variant
      v-if="variantDialogVisible"
      :store-id="storeId"
      :selected-id="selectedId"
      :selected-uri="selectedUri"
      @emitClose="emitClose"
    />

    <!-- 查看全部标签 -->
    <all-tag
      v-if="viewTags"
      :selected-id="formData['productTagIds']"
      :store-id="storeId"
      :view-tags="viewTags"
      @closeTagsDialog="closeTagsDialog"
      @getSelectedTag="getSelectedTag"
      @setTagList="setTagList"
    />

    <!-- 查看全部分类 -->
    <multiple-category
      v-if="viewCategory"
      :store-id="storeId"
      :view-category="viewCategory"
      @closeCategoryDialog="closeCategoryDialog"
      @getSelectedCategory="getSelectedCategory"
      @setCategoryList="setCategoryList"
    />

    <!-- 查看全部供应商 -->
    <all-vendor
      v-if="viewVendor"
      :selected-id="formData['vendorId']"
      :store-id="storeId"
      :view-vendor="viewVendor"
      @closeVendorDialog="closeVendorDialog"
      @getSelectedVendor="getSelectedVendor"
      @setVendorList="setVendorList"
    />

    <!-- 查看全部规格 -->
    <all-variant
      v-if="viewVariant"
      :selected-ids="formData['productTagIds']"
      :store-id="storeId"
      :view-vendor="viewVariant"
      @closeVariantDialog="closeVariantDialog"
    />

    <!-- 批量修改弹窗 -->
    <batch-modify
      v-if="batchVisible"
      :label="writeLabel"
      @closeBatch="closeBatch"
    />

    <!-- 图片预览 -->
    <proview-img v-if="proviewUrl" :src="proviewUrl" @close="closeProview" />
  </div>
</template>

<script src="../pageScript/woocDet"></script>
<style lang="scss" scoped>
@import "@/styles/variables.scss";
.app-container {
  background-color: #fbfbfb;
}
.el-table {
  margin-bottom: 0;
}
.pageTitle {
  font-size: 22px;
  padding: 10px 0 20px;
}
.noDataTip {
  font-size: 12px;
  text-align: center;
  color: #848484;
}
::v-deep .el-form--label-top .el-form-item__label {
  padding-bottom: 5px;
}
.myCard {
  box-shadow: 0 0 0 1px #ddd;
  padding: 15px;
  background: #fff;
  margin-bottom: 20px;
  border-radius: 6px;
  width: 100%;
  .myCardTitle {
    font-weight: 600;
    padding-bottom: 15px;
    &.flex {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
    > span {
      font-weight: 600;
    }
  }
  ::v-deep label {
    font-weight: 500;
  }
  .storeItem {
    margin-bottom: 0;
    ::v-deep .el-form-item__label {
      padding-bottom: 0;
      width: 120px;
    }
    ::v-deep .el-form-item__content {
      display: inline-block;
    }
  }
  .flexCol {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    height: 32px;
    margin-bottom: 18px;
    > .el-form-item {
      margin-bottom: 0;
      margin-left: 20px;
    }
  }
  .w100 {
    width: 100%;
  }
}
.productInfo {
  display: flex;
  ::v-deep .el-form-item__label {
    width: 100%;
    .customLabel {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }
  .infoRight {
    flex: 4;
    width: 0;
    margin-right: 20px;
    ::v-deep #editor {
      line-height: normal;
    }
  }
  .infoLeft {
    flex: 1;
    .el-select,
    .el-date-editor,
    .el-cascader {
      width: 100%;
      min-width: 200px;
    }
  }
}

.batchEditor {
  display: flex;
  align-items: center;
  > span {
    margin-right: 15px;
  }
  .titles {
    flex: 1;
    overflow-x: scroll;
    white-space: nowrap;
    padding: 10px 0;
    .el-button {
      padding: 5px 11px;
    }
  }
}
.specificationBox {
  display: flex;
  border-bottom: 10px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 15px;
  .specLeft {
    width: 150px;
    p {
      color: #000;
      font-size: 13px;
      font-weight: bold;
      line-height: 23px;
      padding: 8px 0;
    }
    .el-image {
      width: 139px;
      height: 139px;
      cursor: pointer;
    }
    i {
      font-size: 16px;
      color: #8c939d;
      width: 139px;
      height: 139px;
      line-height: 139px;
      text-align: center;
      border: 1px dotted #ddd;
      cursor: pointer;
    }
  }
  .specCenter {
    width: 0;
    flex: 1;
    ::v-deep .el-table__body-wrapper {
      overflow: unset;
      table {
        td {
          .cell {
            overflow: unset;
            padding-bottom: 8px;
            .el-date-editor {
              width: 100%;
            }
            .el-form-item {
              margin-bottom: 0;
            }
          }
        }
      }
    }
  }
  .specRight {
    width: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    i {
      cursor: pointer;
      &:hover {
        color: red;
      }
    }
  }
}
.bottomBtns {
  position: fixed;
  bottom: 0px;
  right: 0px;
  box-sizing: border-box;
  width: calc(100% - 54px);
  background: #fff;
  padding: 10px 20px;
  border-top: 1px solid #ccc;
  transition: width 0.28s;
  z-index: 145;
  &.open {
    width: calc(100% - #{$sideBarWidth});
  }
  .right {
    text-align: right;
  }
}
</style>
